<template>
	<view class="">
		<cu-navbar :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">测试</block>
		</cu-navbar>
		<view class="padding bg-white">
			<view class="flex"><text class="text-cut text-bold" v-text="detail.test_title"></text></view>
			<view class="text-right padding-tb-sm">{{ detail.test_num }}已测试</view>
			<view class="thum text-center"><image class="radius" :src="detail.image" mode="aspectFill"></image></view>

			<block v-if="detail.pay_mode == 1 && !detail.is_look">
				<view class="padding margin-top text-center">
					请付费查看结果！
				</view>
				<view class="flex flex-direction padding">
					<button class="bg-mauve margin-xs cu-btn round" @click="toPay">立即付费查看结果</button>
				</view>
			</block>
			<block v-else>
				<view class="" v-if="detail.type != 'component'">
					<view class="padding-tb-sm">
						<text>测试结果：</text>
						<text class="text-mauve" v-text="detail.title"></text>
					</view>
					<view class="">
						<view class="text-bold">分析结果：</view>
						<view class="padding-tb-sm"><text v-text="detail.content ? detail.content : '---暂无数据---'"></text></view>
					</view>
				</view>

				<view class="" v-else>
					<block v-for="(item, index) in detail.content" :key="index">
						<view class="padding-tb-sm">
							<text>标题：</text>
							<text v-text="item.title"></text>
						</view>
						<view class="">
							<view class="text-bold">
								结果：
								<text class="text-mauve" v-text="item.content ? item.content : '---暂无数据---'"></text>
							</view>
						</view>
					</block>
				</view>
				<view class="flex margin-top p-xs margin-bottom-sm mb-sm text-center">
					<button class="flex-sub bg-mauve margin-xs cu-btn round" @click="testDetail(detail.main_id)">我要测试</button>
					<button class="flex-sub bg-orange margin-xs cu-btn round" @click="add">我要评论</button>
					<!-- #ifdef H5 -->
					<button class="flex-sub bg-blue margin-xs cu-btn round" @click="copyShare">分享他人</button>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<button class="flex-sub bg-blue margin-xs cu-btn round" open-type="share">分享他人</button>
					<!-- #endif -->
				</view>
			</block>
		</view>

		<view class="cu-modal" :class="remark_modal ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">添加评论</view>
					<view class="action" @tap="hideModal"><text class="cuIcon-close text-mauve"></text></view>
				</view>
				<view class="padding-xl" v-if="remark_modal">
					<textarea class="margin-top" maxlength="-1" fixed="true" v-model="content" placeholder="评价内容"></textarea>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-mauve text-mauve" @tap="hideModal">取消</button>
						<button class="cu-btn bg-mauve margin-left" @tap="commit">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { test } from '@/config/mixins.js';
export default {
	mixins: [test],
	onLoad(e) {
		this.test_id = e.test_id;
		this.gettest_result();
	},
	onShow() {
		if(this.is_first){
			this.gettest_result();
		}
		this.is_first = true;
	},
	data() {
		return {
			is_first:false,
			test_id: 0,
			remark_modal: false,
			detail: {},
			content: ''
		};
	},
	methods: {
		gettest_result() {
			this.$api
				.test_result({
					test_id: this.test_id
				})
				.then(res => {
					if (res.code) {
						if (res.data.type == 'component') {
							res.data.content = JSON.parse(res.data.content);
						}
						this.detail = res.data;
						// #ifdef MP
						this.$mpShare.title = this.detail.test_title;
						this.$mpShare.path = this.$ph.detail + `?id=${this.detail.main_id}`;
						// #endif
					}
				});
		},
		hideModal() {
			this.remark_modal = false;
		},
		add() {
			this.remark_modal = true;
		},
		commit() {
			if (!this.content) {
				this.$common.errorToShow('请输入评价内容！');
				return;
			}
			this.hideModal();
			this.$api
				.add_remark({
					test_id: this.test_id,
					content: this.content
				})
				.then(res => {
					if (res.code) {
						this.$common.errorToShow('评价成功，等待管理审核后对所有人开放！');
					} else {
						this.$common.errorToShow(res.msg);
					}
				});
		},
		toPay(){
			this.$api
				.orderCreate({
					main_id: this.detail.main_id,
					test_id:this.test_id,
					type:1
				})
				.then(res => {					
					if (res.code == 1) {
						this.$common.navigateTo(this.$ph.test + `?test_id=${res.data.test_id}`);
					} else if (res.code == 2) {
						this.$common.navigateTo(this.$ph.payment + `?order_id=${res.data.order_id}`);
					} else {
						this.$common.errorToShow(res.msg);
					}
				});
		},
		// #ifdef H5
		copyShare() {
			let p = '';
			if (window.location.hash) {
				p = '/#';
			}
			let href = window.location.origin+window.location.pathname + p + this.$ph.detail + `?id=${this.detail.main_id}`;
			if (this.$common.h5Copy(href)) {
				this.$common.successToShow('已复制分享链接');
			}
		}
		// #endif
	}
};
</script>

<style>
page {
	background-color: #f4f6f8;
}
.thum image {
	width: 100%;
	height: 300upx;
}
</style>
